<!-- 设备巡检-巡检规则-查看页面 -->
<template>
  <div>
    <div :class="['view-equip-detail', type === 'comp' ? 'view-comp' : ''].join(' ')">
      <div v-show="type !== 'comp'" class="view-equip-header-detail">
        <div class="flex-row">
          <px-button type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
          <div class="text">{{ formValue.ruleName }} {{ formValue.ruleCode }}</div>
        </div>
        <div>
          <px-button v-has="'ALL_EQUIP_INSPECT_RULE_DELETE'" type="primary" plain @click="handleDelete">删除</px-button>
          <px-button v-has="'ALL_EQUIP_INSPECT_RULE_COPY_PAGE'" type="primary" plain @click="handleCopy">复制</px-button>
          <px-button v-has="'ALL_EQUIP_INSPECT_RULE_EDIT_PAGE'" type="primary" plain @click="handleEdit">编辑</px-button>
          <px-button v-has="'ALL_EQUIP_INSPECT_RULE_PREVIEW'" type="primary" plain @click="handlePreview">预览</px-button>
        </div>
      </div>
      <px-scrollbar :class="['view-flex', type === 'comp' ? 'view-flex-comp' : ''].join(' ')">
        <div class="view-equip-title">基础信息</div>
        <ColumnsTable :columns="INSPECTT_RULE_BASEINFO_COLUMNS" :data="formValue" />
        <div class="view-equip-title">巡检内容</div>
        <ColumnsTable :columns="INSPECTT_RULE_CHECK_CONTENT_COLUMNS" :data="formValue">
          <template #value="{ scope }">
            <template v-if="scope.prop === 'inspectContentTypes'">
              <template v-for="item in INSPECT_CONTENT" :key="item.value">
                <px-tag v-if="scope.col?.includes(item.value)" style="margin-right: 5px">{{ item.label }}</px-tag>
              </template>
            </template>
          </template>
        </ColumnsTable>
        <div class="view-equip-wrap noborder">
          <div class="view-equip-content">
            <InspectRulesTable :table-data="tableData || []" :tableColumns="tableColumns" :total="0" class="w-[100%]" />
          </div>
        </div>
        <div v-show="tableEqiupSelected && tableEqiupSelected.length > 0" class="view-equip-title">巡检设备</div>
        <div v-show="tableEqiupSelected && tableEqiupSelected.length > 0" class="view-equip-wrap noborder">
          <div class="view-equip-content">
            <InspectRulesTable :table-data="tableEqiupSelected" :tableColumns="tableEqiupColums" :total="0" class="w-[100%]" />
          </div>
        </div>
      </px-scrollbar>
      <px-drawer v-model="innerDrawer" :append-to-body="true" size="50%" :with-header="false">
        <px-scrollbar>
          <TemplateDetail v-if="innerDrawer" :id="templateId" type="comp" />
        </px-scrollbar>
        <template #footer>
          <px-button @click="innerDrawer = false">关闭</px-button>
        </template>
      </px-drawer>
      <px-drawer v-model="previewDrawer" :append-to-body="true" size="50%" :with-header="false">
        <px-scrollbar>
          <PreviewForm v-if="previewDrawer" v-model="formValue" isTableEdit="view" />
        </px-scrollbar>
        <template #footer>
          <px-button @click="previewDrawer = false">关闭</px-button>
        </template>
      </px-drawer>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getInspectRule } from "@/api/equip/inspectRule";
// import { useAuth } from "@/views/all/equip/inspect/hooks";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import ColumnsTable from "../../components/ColumnsTable.vue";
import { INSPECT_CONTENT } from "../../config";
import TemplateDetail from "../../templates/ViewInspecDetail.vue";
import { INSPECTT_RULE_BASEINFO_COLUMNS, INSPECTT_RULE_CHECK_CONTENT_COLUMNS } from "../config";
import { useAction } from "../hooks";
import InspectRulesTable from "./InspectRulesTable.vue";
import PreviewForm from "./PreviewForm.vue";
// const { isUpdator } = useAuth();
// const showButton = data => {
//   const flag = isUpdator(data);
//   return flag;
// };
const props = defineProps(["ruleId", "type"]);
const actions = useAction();
const router = useRouter();
const route = useRoute();
// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 模板详情相关
const innerDrawer = ref(false); // 模板详情抽屉是否显示

const previewDrawer = ref(false); // 预览抽屉是否显示
const handlePreview = () => {
  previewDrawer.value = true;
};
const templateId = ref(); // 模板id
const getTemplateId = id => {
  innerDrawer.value = true;
  templateId.value = id;
};
// 页面本身的值
const state = reactive<any>({
  formValue: {},
  tableColumns: [
    { prop: "expend", minWidth: "55", fixed: "left" },
    {
      prop: "temCode",
      type: "link",
      label: "巡检项模板",
      minWidth: "160",
      showOverflowTooltip: true,
      fixed: "left",
      customFun: id => {
        getTemplateId(id);
      }
    },
    { prop: "temName", label: "巡检项模板名称", minWidth: "160", showOverflowTooltip: true, fixed: "left" },
    { prop: "inspectContentTypeDesc", label: "巡检内容", minWidth: "160", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "科室", minWidth: "60", showOverflowTooltip: true },
    { prop: "updateTime", label: "更新时间", minWidth: "160", showOverflowTooltip: true }
  ],
  tableEqiupColums: [
    { prop: "index", minWidth: "55", fixed: "left" },
    { prop: "eqpId", label: "设备编号", minWidth: "160", showOverflowTooltip: true, fixed: "left" },
    { prop: "eqpName", label: "设备名称", minWidth: "160", showOverflowTooltip: true, fixed: "left" },
    { prop: "classNameDesc", label: "科室", minWidth: "60", showOverflowTooltip: true },
    { prop: "systemName", label: "系统", minWidth: "160", showOverflowTooltip: true },
    { prop: "categoryName", label: "设备总称", minWidth: "160", showOverflowTooltip: true },
    { prop: "typeName", label: "设备类型", minWidth: "160", showOverflowTooltip: true },
    { prop: "modelName", label: "设备型号", minWidth: "160", showOverflowTooltip: true }
  ],
  tableEqiupSelected: [],
  tableData: []
});
const { formValue, tableEqiupSelected, tableData, tableColumns, tableEqiupColums } = toRefs(state);
const getDetail = async () => {
  const {
    query: { id: routeId }
  } = route;
  const id = props.ruleId || routeId;
  if (id) {
    const dataDetail: any = await getInspectRule({ id: Number(id), isShowContent: true });
    const { templateDTOList, eqpDTOList, ...others } = dataDetail;
    tableData.value = templateDTOList || [];
    tableEqiupSelected.value = eqpDTOList || [];
    formValue.value = others;
  }
};
onMounted(() => {
  getDetail();
});
// 编辑
const handleEdit = () => {
  actions.edit(formValue.value);
};
// 复制巡检
const handleCopy = () => {
  actions.copy(formValue.value);
};
// 删除
const handleDelete = () => {
  actions.delete(formValue.value, () => {
    router.push("/all/equip/inspect/rule");
  });
};
// 返回主页面
const backMainPage = () => {
  actions.back();
};
// 递归树形结构
const findNode = (tree, func) => {
  for (const node of tree) {
    if (func(node)) return node;
    if (node.children) {
      const res = findNode(node.children, func);
      if (res) return res;
    }
  }
  return null;
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.view-equip-detail {
  height: calc(100vh - 126px);
  .view-comp {
    height: calc(100vh - 97px);
  }
}

.view-flex {
  height: calc(100vh - 210px);
  overflow: hidden;
  &.view-flex-comp {
    height: calc(100vh - 97px);
  }
}

.view-equip-header-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;

  .flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .text {
    margin-left: 20px;
    font-size: 20px;
    font-weight: 600;
    color: rgb(0 0 0 / 90%);
  }

  .view-equip-title {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
</style>
